<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改产品')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-edit" th:object="${product}">
        <input name="id" th:field="*{id}" type="hidden">
        <input name="packageKey" th:field="*{packageKey}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">产品名称：</label>
            <div class="col-sm-8">
                <input name="name" th:field="*{name}" class="form-control" type="text" maxlength="255">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">包名：</label>
            <div class="col-sm-8">
                <input name="packageName" th:field="*{packageName}" class="form-control" type="text" maxlength="255">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">签名：</label>
            <div class="col-sm-8">
                <input name="signName" th:field="*{signName}" class="form-control" type="text" maxlength="255">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">图标：</label>
            <div class="col-sm-8">
                <div class="file-loading">
                    <input id="singleFile" name="file" type="file">
                </div>
                <input th:field="*{icon}" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">alipay：</label>
            <div class="col-sm-8">
                <textarea name="alipayConfig" class="form-control" maxlength="5000">[[*{alipayConfig}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">wechat：</label>
            <div class="col-sm-8">
                <textarea name="wechatConfig" class="form-control" maxlength="5000">[[*{wechatConfig}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">oppoAk：</label>
            <div class="col-sm-8">
                <input name="oppoAk" th:field="*{oppoAk}" class="form-control" type="text" maxlength="50">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">oppoSecret：</label>
            <div class="col-sm-8">
                <input name="oppoSecret" th:field="*{oppoSecret}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">vivoAccount：</label>
            <div class="col-sm-8">
                <input name="vivoAccount" th:field="*{vivoAccount}" class="form-control" type="text" maxlength="50">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">vivoSecret：</label>
            <div class="col-sm-8">
                <input name="vivoSecret" th:field="*{vivoSecret}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">移动APPID：</label>
            <div class="col-sm-8">
                <input name="cmAppId" th:field="*{cmAppId}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">移动APPKEY：</label>
            <div class="col-sm-8">
                <input name="cmAppKey" th:field="*{cmAppKey}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">平台公钥：</label>
            <div class="col-sm-8">
                <textarea name="cmPublicKey" class="form-control" maxlength="5000">[[*{cmPublicKey}]]</textarea>
            </div>
        </div><div class="form-group">
        <label class="col-sm-3 control-label">讯飞APPID：</label>
        <div class="col-sm-8">
            <input name="xfAppId" th:field="*{xfAppId}" class="form-control" type="text" maxlength="100">
        </div>
    </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">讯飞SecretKey：</label>
            <div class="col-sm-8">
                <input name="xfAppSecret" th:field="*{xfAppSecret}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">登录类型：</label>
            <div class="col-sm-8">
                <input name="loginType" th:field="*{loginType}" class="form-control" placeholder="0：不使用，1：移动一键登录" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">登录限制：</label>
            <div class="col-sm-8">
                <input name="loginLimit" th:field="*{loginLimit}" class="form-control" type="number" maxlength="5">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">OAID证书有效期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="oaidCert" th:value="${#dates.format(product.oaidCert, 'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">OAID证书文件：</label>
            <div class="col-sm-8">
                <div class="file-loading">
                    <input id="sFile" name="file" type="file">
                </div>
                <input th:field="*{oaidFile}" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">源文件名：</label>
            <div class="col-sm-8">
                <input name="originName" th:field="*{originName}" class="form-control" type="text" maxlength="100">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">源文件内容：</label>
            <div class="col-sm-8">
                <textarea id="originContent" name="originContent" class="form-control" maxlength="5000">[[*{originContent}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">一句话简介：</label>
            <div class="col-sm-8">
                <textarea name="introduction" class="form-control" maxlength="5000">[[*{introduction}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">应用简介：</label>
            <div class="col-sm-8">
                <textarea name="content" class="form-control" maxlength="5000">[[*{content}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否推荐：</label>
            <div class="col-sm-8">
                <select name="isRecommend" th:with="type=${@dict.getType('sys_business_yes_no')}" class="form-control">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{isRecommend}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">推荐排序：</label>
            <div class="col-sm-8">
                <input name="loginLimit" th:field="*{sort}" class="form-control" type="number" maxlength="5">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">渠道：</label>
            <div class="col-sm-7">
                <select id="channels" name="channels" class="js-select2" multiple>
                    <option th:each="channel:${channelList}" th:value="${channel.id}" th:text="${channel.name}"
                            th:selected="${channelChecked.contains(channel.id)}"></option>
                </select>
            </div>
            <button class="btn btn-info" type="button" onclick="chooseSelect2All('channels')">
                全选
            </button>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">手机品牌：</label>
            <div class="col-sm-7">
                <select id="phoneBrands" name="phoneBrands" class="js-select2" multiple>
                    <option th:each="phoneBrand:${phoneBrandList}" th:value="${phoneBrand}" th:text="${phoneBrand}"
                            th:selected="${phoneBrandChecked.contains(phoneBrand)}"></option>
                </select>
            </div>
            <button class="btn btn-info" type="button" onclick="chooseSelect2All('phoneBrands')">
                全选
            </button>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">

    var prefix = ctx + "product/product";
    $("#form-product-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/saveOrUpdate", $('#form-product-edit').serialize());
        }
    }

    $(function () {
        var icon = $("#icon").val();
        // 单图上传
        $("#singleFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            initialPreviewAsData: true,
            initialPreview: [icon],
            maxFileCount: 1,
            autoReplace: true
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function (event, data) {
            var rsp = data.response;
            $("#icon").val(rsp.url);
        });
    });

    $(function () {
        var oaidFile = $("#oaidFile").val();
        // 单图上传
        $("#sFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            initialPreviewAsData: true,
            initialPreview: oaidFile,
            initialPreviewFileType: 'object',
            maxFileCount: 1,
            autoReplace: true
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function (event, data) {
            var rsp = data.response;
            $("#oaidFile").val(rsp.url);
            $("#originName").val(rsp.originName);
            $("#originContent").html(rsp.originContent);
        });
    });

    $("input[name='oaidCert']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(".js-select2").select2({
        closeOnSelect: false,
        placeholder: "请选择",
        allowHtml: true,
        allowClear: true,
        tags: true // создает новые опции на лету
    });

    function chooseSelect2All(value) {
        //document的对象，可以取到option
        var item = document.getElementById(value)
        //jquery的对象，用来指定select2控件的选择项
        var item_jq = $('#'+value);
        var option_list = [];
        for (var i = 0; i < item.length; i++) {
            var optionVal = item[i].getAttribute('value');
            option_list.push(optionVal);
        }
        item_jq.val(option_list).trigger("change");
    }
</script>
</body>
<style>
    body {
        font-family: 'Ubuntu', sans-serif;
        font-weight: bold;
    }

    .select2-container {
        min-width: 400px;
    }

    .select2-results__option {
        padding-right: 20px;
        vertical-align: middle;
    }

    .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #e9e9e9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 20px;
        vertical-align: middle;
    }

    .select2-results__option[aria-selected=true]:before {
        font-family: fontAwesome;
        content: "\f00c";
        color: #fff;
        background-color: #f77750;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #fff;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #eaeaeb;
        color: #272727;
    }

    .select2-container--default .select2-selection--multiple {
        margin-bottom: 10px;
    }

    .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
        border-radius: 4px;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #f77750;
        border-width: 2px;
    }

    .select2-container--default .select2-selection--multiple {
        border-width: 2px;
    }

    .select2-container--open .select2-dropdown--below {

        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    }

    .select2-selection .select2-selection--multiple:after {
        content: 'hhghgh';
    }

    /* select with icons badges single*/
    .select-icon .select2-selection__placeholder .badge {
        display: none;
    }

    .select-icon .placeholder {
        display: none;
    }

    .select-icon .select2-results__option:before,
    .select-icon .select2-results__option[aria-selected=true]:before {
        display: none !important;
        /* content: "" !important; */
    }

    .select-icon .select2-search--dropdown {
        display: none;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: rgba(179, 26, 26, 0);
        border-color: #273b37;
        padding: 1px 10px;
        color: #000000
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        overflow-y: auto;
        max-height: 150px;
    }
</style>
</html>